<template>
  <div class="app-container">
    <div class="filter-container" id="filter-container-TmptAuthDept">
      <el-button :loading="queryLoading" class="filter-item" size="small" type="primary" plain icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" size="small" type="primary" plain icon="el-icon-plus" @click="handleCreate">
        添加
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      :height="tableHeight"
      style="width: 100%;"
      row-key="id"
      border
      default-expand-all
      :tree-props="defaultProps">

      <el-table-column
        v-for="(col, index) in showTheads"
        :key="index"
        :width="col.width"
        :prop="col.property"
        :sortable="col.sort"
        :sort-orders="['ascending', 'descending']"
        :label="col.label"
      />
      <!--操作Button + 页面级权限控制:hasPermission -->
      <el-table-column fixed="right" label="操作" align="center" min-width="230">
        <template slot-scope="{row,$index}">
          <el-button-group>
            <el-button v-if="row.tmptDeptType.id==1" size="mini" @click="handleSettingTmptAuthPosition(row)">
              职务设置
            </el-button>
            <el-button v-if="row.tmptDeptType.id!=1" size="mini" @click="handleSettingTmptAuthPosition(row)" disabled>
              职务设置
            </el-button>
            <el-button type="primary" icon="el-icon-plus" title="添加" size="mini" @click="handleCreate(row)">
            </el-button>
            <el-button type="primary" icon="el-icon-edit" title="编辑" size="mini" @click="handleUpdate(row)">
            </el-button>
            <el-button type="danger" icon="el-icon-delete" title="删除" size="mini" @click="handleDelete(row)">
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <form-details ref="formDetails" :row="row" :isModule="true" @createResult="createResult" @updateResult="updateResult"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="'职务设置/'+row.name" :visible.sync="dialogFormVisible4TmptAuthPosition" :close-on-click-modal="false" append-to-body>
      <TmptAuthPositionList ref="tmptAuthPositionList" :parentRow="row"/>
    </el-dialog>

  </div>
</template>

<script>
    import { treeApi, deleteApi } from './my-api'
    import {resizeTableHeight } from '@/utils'
    import FormDetails from './my-form-details.vue' // add form form dialog
    import TmptAuthPositionList from '../tmptAuthPosition/list'

    // 所有列对象
    const theadOptions = [
        { property: 'name', label: '名称', width: 300, show: true, edit: true, sort: false },
        // { property: 'id', label: 'ID', width: 70, show: true, edit: false, sort: false },
        // { property: 'parentId', label: '父ID', width: 70, show: true, edit: true, sort: false },
        { property: 'number', label: '编号', width: 100, show: true, edit: true, sort: false },
        { property: 'level', label: '级别', width: 100, show: true, edit: true, sort: false },
        // 枚举对象， json结构，如: {'id':1, 'name':'无效'}
        { property: 'tmptDeptType.name', label: '部门类型', width: 100, show: true, edit: true, sort: false, dataResource: 1},
        // 枚举对象， json结构，如: {'id':1, 'name':'无效'}
        //{ property: 'deleteflag.name', label: '删除标志', width: 100, show: true, edit: true, sort: false, dataResource: 1},
        { property: 'createman', label: '创建人', width: 100, show: true, edit: false, sort: false },
        { property: 'createdate', label: '创建日期', width: 200, show: true, edit: false, sort: false },
        { property: 'modifyman', label: '修改人', width: 100, show: true, edit: false, sort: false },
        { property: 'modifydate', label: '修改日期', width: 200, show: true, edit: false, sort: false },
    ]


    export default {
        name: 'TmptAuthDept-MyTreeTable',
        components: {FormDetails, TmptAuthPositionList},
        data() {
            return {
                tableKey: undefined,
                tableData: [],
                defaultProps: { children: 'tmptAuthDeptList' },
                // 默认表头控制
                theadOptions: theadOptions,
                showTheads: [], // 默认表头 Default headertableKey: 0,
                listLoading: false,
                queryLoading: false,
                dialogFormVisible: false,
                dialogStatus: '',
                textMap: {
                    update: '编辑',
                    create: '新增'
                },
                downloadLoading: false,
                dialogFormVisible4TmptAuthPosition: false,
                row: {},
                tableHeight:0, // 表格高度
                filterContainerHeight: 0, // 查询容器高度
                clientHeight: 0 // 浏览器高度
            }
        },

        mounted() {
            // 浏览器、元素大小变化时，动态调整table高度
            resizeTableHeight(this, 'filter-container-TmptAuthDept', 130)
            this.initLayout()
            this.getList()
        },

        methods: {
            initLayout() {
                theadOptions.forEach(col => {
                    if (col.show) {
                        this.showTheads.push(col)
                    }
                })
            },
            getList() {
                this.queryLoading = true
                this.listLoading = true
                treeApi({ id: 0 }).then((result) => {
                    this.queryLoading = false
                    this.listLoading = false
                    if (result.success) {
                        this.tableData = result.obj.tmptAuthDeptList
                    }
                })
            },

            handleFilter() {
                this.getList()
            },

            // 添加操作 start
            handleCreate(row) {
                if (row===undefined || row.id===undefined) row.id = 0 // root node
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                // 消除上次出现的验证信息
                this.$nextTick(() => {
                    this.$refs['formDetails'].clearValidate()
                    this.$refs['formDetails'].resetTemp()
                    this.$refs['formDetails'].defaultTemp()
                    this.$refs['formDetails'].setParentNodeId(row.id)
                })
            },
            // 调用子组件操作数据
            createData() {
                this.$refs['formDetails'].createData()
            },
            // 子组件操作成功，回调此方法，关闭弹框、刷新
            createResult() {
                this.dialogFormVisible = false
                this.handleFilter()
            },
            // 编辑操作 start
            handleUpdate(row) {
                this.row = Object.assign({}, row) // copy obj
                this.row.tmptDeptType = this.row.tmptDeptType.id // 枚举对象，取id值
                this.row.deleteflag = this.row.deleteflag.id // 枚举对象，取id值
                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                // 消除上次出现的验证信息
                this.$nextTick(() => {
                    this.$refs['formDetails'].clearValidate()
                })
            },
            // 调用子组件操作数据
            updateData() {
                this.$refs['formDetails'].updateData()
            },
            // 子组件操作成功，回调此方法，关闭弹框、刷新
            updateResult() {
                this.dialogFormVisible = false
                this.getList()
            },
            // 删除操作
            handleDelete(row) {
                this.$confirm('确认删除吗？')
                    .then(_ => {
                        // delete api
                        deleteApi({ id: '' + row.id }).then((r) => {
                            this.notify(r)
                            if (r.success) {
                                this.getList()
                            }
                        })
                        // end
                    })
                    .catch(_ => {})
            },
            // 职务设置
            handleSettingTmptAuthPosition(row) {
              this.row = Object.assign({}, row) // copy obj
              this.dialogFormVisible4TmptAuthPosition = true
            },


        }
    }
</script>
<style>

</style>
